<template>
	<view class="museum-item" @click="visible = true">
		<view>
			<icon-layers :style="{ color: '#165DFF',marginRight: '12px',fontSize: '18px' }" />
			<text class="arco-modal-title">{{ info.title }}</text>
		</view>
		<view class="desc-box">
			<image :src="info.image" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view style="text-align: center;">
			<a-tag :color=" info.description ? 'arcoblue': 'orange'  ">{{ info.description || '暂无描述' }}</a-tag>
		</view>
	</view>

	<a-modal :footer="false" v-model:visible="visible" width="90%" hide-cancel>
		<template #title>
			{{ info.title }}
		</template>
		<view class="desc">{{ info.description || '暂无描述' }}</view>
		<div class="model-content">
			<a-image-preview-group infinite>
				<a-image :src="info.image" style="margin-bottom: 4px;" width="100%" fit="cover" />
				<block v-for="(img,index) in info.children" :Key="index">
					<a-image :src="img" style="margin-bottom: 4px;"  width="100%" fit="cover" />
				</block>
			</a-image-preview-group>
			<view style="margin-top: 24px;">
				<block v-for="(node,index) in info.nodes" :Key="`${node}-index`">
					<view class="node">{{ node }}</view>
				</block>
			</view>

		</div>
	</a-modal>

</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'

	const visible = ref(false)

	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		}
	})

	const infoDetail = () => {
		uni.navigateTo({
			url: '/pages/Info?id=' + props.info.id
		})
	}
</script>

<style scoped lang="scss">
	.museum-item {
		background-color: #fff;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.desc-box {
		background-color: #F3F5F7;
		padding: 20rpx 40rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.desc {
		text-align: left;
		font-size: 14px;
		color: #999;
		font-weight: 400;
		line-height: 1.5;
		margin-bottom: 24px;
		background-color: #F2F3F5;
		padding: 8px 12px;
	}

	.node {
		text-align: center;
		font-size: 12px;
		color: #999;
		font-weight: 400;
		line-height: 1.5;
		padding: 8px 16px;
		margin-bottom: 8px;
	}

	.model-content {
		max-height: 400px;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>